<template>
  <div style="height: 100%">
    <statistic-head :page="page"></statistic-head>
    <div style="background-color: white;height: 100%">
      <el-row style="padding-bottom: 60px">
        <el-col :span="3" style="padding: 10px;width: 200px">
          <li style="font-size: 15px">最高能耗：{{maxQuarter}}季度 {{maxEc}}度</li>
        </el-col>
        <el-col :span="3" style="padding: 10px;width: 200px">
          <li style="font-size: 15px">最低能耗：{{minQuarter}}季度 {{minEc}}度</li>
        </el-col>
        <el-col :span="3" style="padding: 10px;width: 200px">
          <li style="font-size: 15px">平均能耗：{{avgEc}}度</li>
        </el-col>
        <el-col :span="2" :offset="18">
          <el-radio v-model="radio" label="line">折线</el-radio>
        </el-col>
        <el-col :span="2">
          <el-radio v-model="radio" label="histogram">柱形</el-radio>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <template>
            <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
          </template>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import VeLine from 'v-charts/lib/line.common'
  import VeHistogram from 'v-charts/lib/histogram.common'
  import VePie from 'v-charts/lib/pie.common'
  import VeChart from 'v-charts/lib/chart'
  import statisticHead from "../componet/statisticHead";
  import Axios from "axios";

  // Vue.use(VeLine.name, VeLine);

  // new Vue({
  //   el: '#app',
  //   render: h => h(App)
  // });

  export default {
    components: {
      VeLine,
      VeHistogram,
      VePie,
      VeChart,
      statisticHead
    },

    data() {
      // this.typeArr = ['line','histogram','pie']
      this.extend = {
        'xAxis.0.axisLabel.rotate': 45
      };
      return {
        chartData: {
          columns: [],
          rows: []
        },
        chartType: 'pie',
        typeArr: [
          {value: 'line',label: '折线'},
          {value: 'histogram',label: '柱形'}
        ],
        chartSettings: {type:'line'},
        totalEC: 4396,
        radio: 'line',
        page: '按季度统计显示',
        maxEc: '',
        minEc: '',
        avgEc: '',
        maxQuarter: '',
        minQuarter:'',
        quarter: ['1-3','4-6','7-9','10-12']
      }
    },
    methods:{
      getData(){
        let self = this
        Axios.get(this.api+'getSeasonEC',{
          headers: {'X-Requested-With':'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          self.maxEc = res.data.total.maxEC.EC
          self.maxQuarter = res.data.total.maxEC.season
          self.minEc = res.data.total.minEC.EC
          self.minQuarter = res.data.total.minEC.season
          self.avgEc = res.data.total.avgEC
          self.totalEC =  res.data.total.totalEC

          let xTemp = ['季度']
          let yTemp = []
          let num = 0
          res.data.ECList.forEach(item => {
            let temp = {}
            temp['季度'] = item.season+'('+self.quarter[num++]+'月)'
            item.ECOfType.forEach(ec => {
              if (xTemp.indexOf(ec.deviceTypeName)===-1){
                xTemp.push(ec.deviceTypeName)
              }
              temp[ec.deviceTypeName] = ec.electricConsume
            })
            yTemp.push(temp)
          })

          self.chartData = {
            columns: xTemp,
            rows: yTemp
          }
        })
      }
    },
    mounted(){
      this.getData()
    },
    watch:{
      radio(newVal){
        console.log(newVal)
        this.chartSettings.type = newVal
      }
    }
  }
</script>

<style>
  .el-scrollbar__wrap{
    height: 90%;
    overflow-x: hidden;
  }
  /*.scrollbar-wrap{*/
  /*  overflow-x: hidden;*/
  /*}*/
</style>
